<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link href="../../bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<script src="/js/vue.js"></script>
	<script src="/js/axios.min.js"></script>
	<script src="/element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
<style type="text/css">
.mystage{
	font-size: 20px;
	vertical-align: middle;
	cursor: pointer;
}
.closingDate{
	font-size : 15px;
	cursor: pointer;
	vertical-align: middle;
}
</style>
	
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">

	//默认情况下取消和保存按钮是隐藏的
	var cancelAndSaveBtnDefault = true;
	
	$(function(){
		$("#remark").focus(function(){
			if(cancelAndSaveBtnDefault){
				//设置remarkDiv的高度为130px
				$("#remarkDiv").css("height","130px");
				//显示
				$("#cancelAndSaveBtn").show("2000");
				cancelAndSaveBtnDefault = false;
			}
		});
		
		$("#cancelBtn").click(function(){
			//显示
			$("#cancelAndSaveBtn").hide();
			//设置remarkDiv的高度为130px
			$("#remarkDiv").css("height","90px");
			cancelAndSaveBtnDefault = true;
		});
		
		$(".remarkDiv").mouseover(function(){
			$(this).children("div").children("div").show();
		});
		
		$(".remarkDiv").mouseout(function(){
			$(this).children("div").children("div").hide();
		});
		
		$(".myHref").mouseover(function(){
			$(this).children("span").css("color","red");
		});
		
		$(".myHref").mouseout(function(){
			$(this).children("span").css("color","#E6E6E6");
		});
		
		
		//阶段提示框
		$(".mystage").popover({
            trigger:'manual',
            placement : 'bottom',
            html: 'true',
            animation: false
        }).on("mouseenter", function () {
                    var _this = this;
                    $(this).popover("show");
                    $(this).siblings(".popover").on("mouseleave", function () {
                        $(_this).popover('hide');
                    });
                }).on("mouseleave", function () {
                    var _this = this;
                    setTimeout(function () {
                        if (!$(".popover:hover").length) {
                            $(_this).popover("hide")
                        }
                    }, 100);
                });
	});
	
	
	
</script>

</head>
<body>
<div id="app">
	<!-- 返回按钮 -->
	<div style="position: relative; top: 35px; left: 10px;">
		<a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left" style="font-size: 20px; color: #DDDDDD"></span></a>
	</div>
	
	<!-- 大标题 -->
	<div style="position: relative; left: 40px; top: -30px;">
		<div class="page-header">
			<h3>动力节点-{{tran.tranname}} <small>￥{{tran.money}}</small></h3>
		</div>
		
	</div>

	<br/>
	<br/>
	<br/>
<!--
<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="资质审查" style="color: #90F790;"></span>
		-----------
		<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="需求分析" style="color: #90F790;"></span>
		-----------
		<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="价值建议" style="color: #90F790;"></span>
		-----------
		<span class="glyphicon glyphicon-ok-circle mystage" data-toggle="popover" data-placement="bottom" data-content="确定决策者" style="color: #90F790;"></span>
		-----------
		<span class="glyphicon glyphicon-map-marker mystage" data-toggle="popover" data-placement="bottom" data-content="提案/报价" style="color: #90F790;"></span>
		-----------
		<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="谈判/复审"></span>
		-----------
		<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="成交"></span>
		-----------
		<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="丢失的线索"></span>
		-----------
		<span class="glyphicon glyphicon-record mystage" data-toggle="popover" data-placement="bottom" data-content="因竞争丢失关闭"></span>
		-----------
-->
	<!-- 阶段状态 -->
	<div style="position: relative; left: 40px; top: -50px;">
		阶段&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<span v-for="item in stages">
			<span :class="item.target?'glyphicon glyphicon-map-marker mystage':'glyphicon glyphicon-record mystage'" data-toggle="popover"
				  data-placement="bottom" :data-content="item.text" :style="item.light?'color:#90F790':''"></span>
			-----------
		</span>

		<span class="closingDate">{{tran.expected_date}}</span>
	</div>
	
	<!-- 详细信息 -->
	<div style="position: relative; top: 0px;">
		<div style="position: relative; left: 40px; height: 30px;">
			<div style="width: 300px; color: gray;">所有者</div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>{{tran.ownername}}</b></div>
			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">金额</div>
			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>{{tran.money}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 10px;">
			<div style="width: 300px; color: gray;">名称</div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>{{tran.tranname}}</b></div>
			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">预计成交日期</div>
			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>{{tran.expected_date}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 20px;">
			<div style="width: 300px; color: gray;">客户名称</div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>{{tran.customername}}</b></div>
			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">阶段</div>
			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>{{tran.stage}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 30px;">
			<div style="width: 300px; color: gray;">类型</div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>{{tran.type}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 40px;">
			<div style="width: 300px; color: gray;">来源</div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>{{tran.source}}</b></div>
			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">市场活动源</div>
			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>{{tran.activityname}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 50px;">
			<div style="width: 300px; color: gray;">联系人名称</div>
			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>{{tran.contactname}}</b></div>
			<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 60px;">
			<div style="width: 300px; color: gray;">创建者</div>
			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>{{tran.createusername}}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">{{tran.create_time}}</small></div>
			<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 70px;">
			<div style="width: 300px; color: gray;">修改者</div>
			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>{{tran.editusername}}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">{{tran.edit_time}}</small></div>
			<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 80px;">
			<div style="width: 300px; color: gray;">描述</div>
			<div style="width: 630px;position: relative; left: 200px; top: -20px;">
				<b>
					{{tran.description}}
				</b>
			</div>
			<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 90px;">
			<div style="width: 300px; color: gray;">联系纪要</div>
			<div style="width: 630px;position: relative; left: 200px; top: -20px;">
				<b>
					{{tran.contact_summary}}
				</b>
			</div>
			<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 100px;">
			<div style="width: 300px; color: gray;">下次联系时间</div>
			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>{{tran.next_contact_time}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
	</div>
	
	<!-- 备注 -->
	<div style="position: relative; top: 100px; left: 40px;">
		<div class="page-header">
			<h4>备注</h4>
		</div>
		
		<!-- 备注1 -->
		<div class="remarkDiv" style="height: 60px;">
			<img title="zhangsan" src="../../image/user-thumbnail.png" style="width: 30px; height:30px;">
			<div style="position: relative; top: -40px; left: 40px;" >
				<h5>哎呦！</h5>
				<font color="gray">交易</font> <font color="gray">-</font> <b>动力节点-交易01</b> <small style="color: gray;"> 2017-01-22 10:10:10 由zhangsan</small>
				<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
					<a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
				</div>
			</div>
		</div>
		
		<!-- 备注2 -->
		<div class="remarkDiv" style="height: 60px;">
			<img title="zhangsan" src="../../image/user-thumbnail.png" style="width: 30px; height:30px;">
			<div style="position: relative; top: -40px; left: 40px;" >
				<h5>呵呵！</h5>
				<font color="gray">交易</font> <font color="gray">-</font> <b>动力节点-交易01</b> <small style="color: gray;"> 2017-01-22 10:20:10 由zhangsan</small>
				<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
					<a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
				</div>
			</div>
		</div>
		
		<div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
			<form role="form" style="position: relative;top: 10px; left: 10px;">
				<textarea id="remark" class="form-control" style="width: 850px; resize : none;" rows="2"  placeholder="添加备注..."></textarea>
				<p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
					<button id="cancelBtn" type="button" class="btn btn-default">取消</button>
					<button type="button" class="btn btn-primary">保存</button>
				</p>
			</form>
		</div>
	</div>
	
	<!-- 阶段历史 -->
	<div>
		<div style="position: relative; top: 100px; left: 40px;">
			<div class="page-header">
				<h4>阶段历史
					<el-button type="primary" icon="el-icon-plus" @click="openDialog()" circle></el-button>
				</h4>
			</div>
			<div style="position: relative;top: 0px;">
				<el-table
						:data="historys"
						border
						style="width: 100%">
					<el-table-column
							fixed
							prop="stageValue"
							label="交易阶段"
							width="150">
					</el-table-column>
					<el-table-column
							prop="money"
							label="交易金额"
							width="120">
					</el-table-column>
					<el-table-column
							prop="expectedDate"
							label="预计成交日期"
							width="120">
					</el-table-column>
					<el-table-column
							prop="createTime"
							label="创建时间"
							width="120">
					</el-table-column>
					<el-table-column
							prop="createName"
							label="创建人"
							width="300">
					</el-table-column>
					<el-table-column
							label="操作"
							width="100">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
							<el-button type="text" size="small" @click="openDialog(scope.row)">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			
		</div>
	</div>
	<!--添加、修改历史弹框-->
	<el-dialog title="历史阶段" :visible.sync="dialogFormVisible">
		<el-form :model="history">
			<el-form-item label="交易金额" :label-width="formLabelWidth">
				<el-input v-model="history.money" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="交易阶段" :label-width="formLabelWidth">
				<el-select v-model="history.stage" placeholder="交易阶段">
					<el-option v-for="item in stages" :label="item.text" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="预计成交时间" :label-width="formLabelWidth">
				<el-date-picker
						v-model="history.expectedDate"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择日期">
				</el-date-picker>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="saveHistory">确 定</el-button>
		</div>
	</el-dialog>
	<div style="height: 200px;"></div>
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			tran:{},
			stages:[],//所有的交易阶段
			historys:[],  //历史记录
			dialogFormVisible: false,
			formLabelWidth: '120px',
			history:{//修改/添加历史对象
				id:undefined,
				stage:undefined,//阶段
				money:undefined,
				expectedDate:undefined,
				createBy:undefined,//创建人
				tranId:undefined,
			}
		},
		methods:{
			openDialog(item){
                this.dialogFormVisible=true;
				if (item){//修改
					this.history={...item}
				}else{//添加
					this.history={
						id:undefined,
						stage:undefined,//阶段
						money:undefined,
						expectedDate:undefined,
						createBy:undefined,//创建人
						tranId:undefined,
					}
					//创建人
					this.history.createBy=JSON.parse(sessionStorage.getItem("user")).id;
					//交易的id
					this.history.tranId=sessionStorage.getItem("id");
				}
			},
			saveHistory(){
				axios({
					method:this.history.id?"put":"post",
					url:"/history",
					data:this.history
				}).then(resp=>{
					let  data=resp.data;
					if (data.code==200){
						this.$message({
							type:"success",
							message:"操作成功"
						});
						//隐藏弹框
						this.dialogFormVisible=false;
						//刷新历史
						this.getHistory();
						//重新点亮最上方的的阶段历史
						this.initData();
						this.getAllStage();//获取所有的交易阶段
					}
				})
			},
			initData(){
				axios.get(`/tran/getById?id=${sessionStorage.getItem("id")}`)
				.then(resp=>{
					let data=resp.data;
					this.tran=data.result;//交易
					this.stages.forEach(item=>{
						if (item.value==this.tran.stagevalue){
							item.target=true;//到达的节点
						}
						if (item.value<=this.tran.stagevalue){
							item.light=true;//是否点亮
						}
					})
				})
			},
			getAllStage(){//获取所有的交易阶段
				axios.get("/value/getDicValueByCode?code=tran_stage").then(resp=>{
					let data=resp.data;
					this.stages=data.result;
					this.stages.forEach(item=>{
						if (item.value==this.tran.stagevalue){
							item.target=true;//到达的节点
						}
						if (item.value<=this.tran.stagevalue){
							item.light=true;//是否点亮
						}
					})
				})
			},
			getHistory(){//交易的历史记录
				axios.get(`/history/getHistoryByTranId?tranId=${sessionStorage.getItem("id")}`)
				.then(resp=>{
					let data=resp.data;
					this.historys=data.result
				})
			}
		},
		created(){
			this.initData();
			this.getAllStage();//获取所有的交易阶段
			this.getHistory()
		}
	})
</script>
</body>
</html>